﻿
.mud-tooltip-root {
  width: fit-content;

  &.mud-tooltip-inline {
    display: inline-block;
  }
}

.mud-tooltip {
  padding: 4px 8px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4em;
  border-radius: var(--mud-default-borderradius);
  z-index: var(--mud-zindex-tooltip);

  &.mud-tooltip-default {
    color: var(--mud-palette-dark-text);
    background-color: var(--mud-palette-gray-darker);

    &.mud-tooltip-arrow::after {
      border-color: var(--mud-palette-gray-darker) transparent transparent transparent;
    }
  }

  &.mud-tooltip {
    &-center-left:not([data-mudpopover-flip]), &-center-right[data-mudpopover-flip] {
      transform: translateX(-10px);

      &.mud-tooltip-arrow::after {
        left: 100%;
        transform: rotate(270deg);
      }
    }

    &-center-right:not([data-mudpopover-flip]), &-center-left[data-mudpopover-flip] {
      transform: translateX(10px);

      &.mud-tooltip-arrow::after {
        right: 100%;
        transform: rotate(90deg);
      }
    }

    &-top-center:not([data-mudpopover-flip]), &-bottom-center[data-mudpopover-flip] {
      transform: translateY(-10px);

      &.mud-tooltip-arrow::after {
        top: 100%;
        transform: rotate(0deg);
      }
    }

    &-bottom-center:not([data-mudpopover-flip]), &-top-center[data-mudpopover-flip] {
      transform: translateY(10px);

      &.mud-tooltip-arrow::after {
        bottom: 100%;
        transform: rotate(180deg);
      }
    }
  }

  &.mud-tooltip-arrow::after {
    content: "";
    position: absolute;
    border-width: 6px;
    border-style: solid;
    border-color: transparent;
    border-top-color: inherit;
  }
}
